<template>
  <div class="homeBox">
    <div class="homeHead">
      <span class="iconfont iconnew"></span>
      <div class="toselect">
        <span class="iconfont iconsearch"></span>
        <span>热门搜索</span>
      </div>
      <router-link to="/Login" v-if="!token && !userid" class="toLogin">
        <span class="iconfont iconwode"></span>
      </router-link>
      <router-link to="/user" v-else class="toUser">
        <img :src="$axios.defaults.baseURL + head_img" alt="" v-if="head_img" />
        <img src="../assets/logo.png" alt="" v-else />
      </router-link>
    </div>

    <van-pull-refresh
      v-model="isLoading"
      :head-height="80"
      @refresh="onRefresh"
    >
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img
          class="doge"
          src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3028672281,4280382655&fm=26&gp=0.jpg"
          :style="{ transform: `scale(${props.distance / 80})` }"
        />
      </template>

      <!-- 释放提示 -->
      <template #loosing>
        <img
          class="doge"
          src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3028672281,4280382655&fm=26&gp=0.jpg"
        />
      </template>

      <!-- 加载提示 -->
      <template #loading>
        <img
          class="doge"
          src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3028672281,4280382655&fm=26&gp=0.jpg"
        />
      </template>

      <van-tabs swipeable sticky animated v-model="active" backgruond="#e4e4e4">
        <van-tab :title="item.name" v-for="item in list" :key="item.id">
          <!-- 无限加载的标签 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
          >
            <!-- 没有数据显示 -->
            <van-empty
              class="custom-image"
              image="https://img.yzcdn.cn/vant/custom-empty-image.png"
              description="暂时没有没内容"
              v-if="list[active].categorypage.length == 0"
            />
            <!-- 有数据显示 -->
            <categoryitem
              v-for="(item, index) in list[active].categorypage"
              :key="index"
              :category="item"
              v-else
            ></categoryitem>
          </van-list>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>

<script>
import categoryitem from "@/components/categoryitem";
// 注意：如果是get方法请求：parmas传递参数。如果是post请求：data方法传递参数
export default {
  components: {
    categoryitem
  },
  mounted() {
    if (this.token && this.userid) {
      this.getuser();
    }
    this.getcategory();
  },
  data() {
    return {
      token: localStorage.getItem("token"),
      userid: localStorage.getItem("userId"),
      head_img: "",
      list: "",
      active: 0,
      isLoading: false,
      loading: false,
      finished: false
    };
  },
  watch: {
    active(newval) {
      this.getcategory();
    }
  },
  computed: {
    getCategoryId() {
      const categoryId = this.list[this.active].id;
      return categoryId;
    }
  },
  methods: {
    getuser() {
      this.$axios({
        url: "/user/" + this.userid
      }).then(res => {
        if ((res.data.data.message = "获取成功")) {
          this.head_img = res.data.data.head_img;
        }
      });
    },
    getcategory() {
      this.$axios({
        url: "/category"
      }).then(res => {
        const newData = res.data.data.map(res => {
          return {
            ...res,
            categorypage: [],
            pageIndex: 1,
            pageSize: 5
          };
        });
        this.list = newData;
        this.getNews();
      });
    },
    getNews() {
      const currCategory = this.list[this.active];
      this.$axios({
        url: "/post",
        params: {
          category: this.getCategoryId,
          pageIndex: currCategory.pageIndex,
          pageSize: currCategory.pageSize
        }
      }).then(res => {
        console.log(res.data.data);
        // console.log(res);
        // this.list[this.active].categorypage = res.data.data;
        // 获取回来的新闻数据进行改造----》拼接上旧的数据
        currCategory.categorypage = [
          ...currCategory.categorypage,
          ...res.data.data
        ];
        this.loading = false;
        if (!res.data.data.length) {
          this.finished = true;
        } else {
          this.finished = false;
        }
      });
    },

    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.getcategory();
      }, 1000);
    },
    onLoad() {
      setTimeout(() => {
        const crrpage = this.list[this.active];
        crrpage.pageIndex += 1;
        this.getNews();
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
.homeHead {
  color: #ffffff;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  padding: 1.389vw 2.778vw;
  height: 11.111vw;
  background: #ff0000;
  .iconnew {
    font-size: 16.667vw;
  }
  .toselect {
    margin: 0 5.556vw;
    text-align: center;
    line-height: 8.333vw;
    border-radius: 8.333vw;
    font-size: 3.333vw;
    flex: 1;
    background: #f97979;
    height: 8.333vw;
    .iconsearch {
      font-size: 3.889vw;
      margin-right: 1.389vw;
    }
  }
  .toUser {
    line-height: 2.222vw;
    img {
      border-radius: 50%;
      width: 9.167vw;
    }
  }
  .toLogin {
    span {
      font-size: 5vw;
    }
  }
}
.ulbox {
  overflow: hidden;
  ul {
    display: flex;
  }
}

.doge {
  width: 30.556vw;
  height: 20.833vw;
  margin-top: 2.222vw;
  border-radius: 1.111vw;
}
</style>